<template>
	<view class="box">
		<view class="top">
			<image src="../../static/images/center/center.jpg" mode=""></image>
		</view>

		<view class="centerbox">
			<view class="center">
				<view class="imgbox">
					<view class="head_img">
						<view class="imgborder">
							<image :src="avatarUrl" mode=""></image>
						</view>
					</view>

					<view class="text">
						<view class="login" v-if="loginStatus" @tap="login">
							<text type="default">登入/注册</text>
						</view>
						<view class="login" v-if="!loginStatus" @tap="logout">
							<text type="default">退出登入</text>
						</view>
						<view class="tip" v-if="true">
							<text class="name">{{persondata[0].nickName}}</text>
							<text class="phone" v-if="!loginStatus">欢迎到来!</text>
						</view>
					</view>
				</view>

				<view class="ul_box">
					<view class="ul">
						<view class="li clear">
							<view class="i1">
								<van-icon name="orders-o" />
							</view>

							<view class="p">
								<text>我的订单</text>
							</view>

							<view class="i2">
								<van-icon name="arrow" />
							</view>

							<view class="xian"></view>

						</view>


						<view class="li clear">
							<view class="i1">
								<van-icon name="location-o" />
							</view>

							<view class="p" @tap="address">
								<text>收货地址</text>
							</view>

							<view class="i2">
								<van-icon name="arrow" />
							</view>

							<view class="xian"></view>

						</view>



						<view class="li clear">
							<view class="i1">
								<van-icon name="newspaper-o" />
							</view>

							<view class="updata_person" @tap="updataPerson">
								<view class="p">
									<text>我的资料</text>
								</view>

								<view class="i2">
									<van-icon name="arrow" />
								</view>
							</view>

							<view class="xian"></view>

						</view>



						<view class="li clear">
							<view class="i1">
								<van-icon name="warning-o" />
							</view>

							<view class="p" @tap="userknow">
								<text>使用须知</text>
							</view>

							<view class="i2">
								<van-icon name="arrow" />
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		logincheck,
		addUser
	} from "../../static/service/center/logincheck.js"
	export default {
		data() {
			return {
				avatarUrl: '../../static/images/center/avatar.png',
				persondata: [],
				loginStatus: true
			}
		},
		onShow() {
			this.initdata()

		},
		methods: {
			address() {
				let userinfo = uni.getStorageSync('userinfo')

				console.log(userinfo)

				if (userinfo == '') {
					uni.showModal({
						title: '请授权登入',
						content: '登入后才能同步信息,解锁更多服务。',
						success: (res) => {
							console.log(res)
							if (res.confirm) {
								console.log(this.login())
							}
						}
					})
				} else {
					uni.navigateTo({
						url: 'components/address/address'
					})
				}

			},
			login() {
				let that = this
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						if (res.errMsg == 'getUserProfile:ok') {
							uni.showLoading({
								title: '加载中...',
								mask: true
							})
							setTimeout(() => {
								let userinfo = res.userInfo
								logincheck().then((res) => {
									if (res.login) {
										console.log(res.data[0], '注册过')
										uni.setStorageSync('userinfo', JSON.stringify(res.data[0]))
										that.persondata.push(userinfo)
										that.avatarUrl = userinfo.avatarUrl
										uni.hideLoading()
										uni.showToast({
											title: '登入成功!',
											duration: 2000 //持续时间为 2秒
										})
										that.loginStatus = false
									} else {
										addUser(userinfo).then(() => {
											that.persondata.push(userinfo)
											that.avatarUrl = userinfo.avatarUrl
											uni.hideLoading()
											uni.showToast({
												title: '登入成功!',
												duration: 2000 //持续时间为 2秒
											})
											that.loginStatus = false
										})
									}
								})
							}, 500)
						}
						// 获取openid
						wx.cloud.callFunction({
							name: 'openid',
							data: {
								message: 'helloCloud',
							}
						}).then(res => {
							console.log(res.result.openid, 1234567)
							uni.setStorageSync('openid', res.result.openid)
						}).catch((err) => {
							console.log('失败')
						})
					},
					fail: (res) => {
						uni.showToast({
							title: '登入失败',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},
			logout() {
				let that = this
				uni.showModal({
					title: '是否退出登入?',
					content: '退出登入后,将无法享受更多服务。',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('userinfo')
							uni.removeStorageSync('openid')
							this.initdata()
						}
					}
				})
			},
			initdata() {
				let userinfo = uni.getStorageSync('userinfo')
				if (userinfo == '') {
					console.log('未登入')
					this.persondata = []
					this.loginStatus = true
					this.avatarUrl = '../../static/images/center/avatar.png'
				} else {
					let dataList = JSON.parse(userinfo)
					this.persondata.push(dataList)
					this.loginStatus = false
					this.avatarUrl = dataList.avatarUrl
					console.log(dataList)
				}
			},
			userknow() {
				uni.navigateTo({
					url: 'components/userknow/userknow'
				})
			},
			updataPerson() {
				uni.navigateTo({
					url: '../mydata/mydata'
				})
			}

		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: #f3f3f3;
	}

	.top {
		width: 100%;
		height: 400rpx;
	}

	.top image {
		width: 100%;
		height: 100%;
	}

	.centerbox {
		width: 100%;
		height: 70%;
		position: relative;
	}

	.centerbox .center {
		width: 95%;
		height: 100%;
		background-color: #FFFFFF;
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 20rpx;
	}

	.imgbox {
		width: 100%;
		height: 30%;
		margin-top: 5%;
	}

	.head_img {
		width: 100%;
		height: 50%;
		position: relative;
	}

	.head_img .imgborder {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid #165f4b;
	}

	.head_img .imgborder image {
		width: 94%;
		height: 94%;
		border-radius: 50%;
		margin: 3%;
		box-shadow: 1px 1px 3px #C8C7CC;
	}

	.login {
		width: 100%;
		height: 70rpx;
		text-align: center;
		position: relative;

	}

	.login text {
		width: 350rpx;
		line-height: 70rpx;
		text-align: center;
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.imgbox .text {
		width: 100%;
		height: 100rpx;
		margin-top: 10px;
	}

	.imgbox .text text {
		text-align: center;
		display: block;
	}

	.imgbox .name {
		font-size: 1.1rem;
	}

	.imgbox .phone {
		margin-top: 10rpx;
		color: #8d8d8d;
		font-size: 0.8rem;
	}

	.ul_box {
		width: 100%;
		height: 50%;
	}

	.ul_box .li {
		width: 90%;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		position: relative;
	}

	.ul_box .li .i1 {
		width: 10%;
		height: 100%;
		text-align: center;
		float: left;
		font-size: 1.75rem;
		color: #00613d;
		margin-bottom: 10rpx;
	}

	.ul_box .li .p {
		width: 80%;
		height: 100%;
		float: left;
		font-size: 1rem;
		box-sizing: border-box;
		padding-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.ul_box .li .i2 {
		width: 10%;
		height: 100%;
		text-align: center;
		float: left;
		font-size: 1.25rem;
		margin-bottom: 10rpx;
	}

	.ul_box .xian {
		width: 95%;
		height: 1px;
		background-color: #e0e0e0;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
